<template>
    <el-container direction="vertical">
        <el-table
                :data="users.filter(data => !search || data.email.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    width="50px"
                    label="Id"
                    prop="id">
            </el-table-column>
            <el-table-column
                    width="80px"
                    label="昵称"
                    prop="nickname">
            </el-table-column>
            <el-table-column
                    label="邮箱"
                    prop="email">
            </el-table-column>
            <el-table-column label="角色">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.role" placeholder="请选择" size="mini" @change="handleUserRoleChange(scope.row.id, scope.row.role)">
                        <el-option
                                v-for="item in roles"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search"
                              size="mini"
                              placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            :type="scope.row.block ? 'success' : 'warning'"
                            @click="handleUserBlock(scope.row.id, scope.row)">{{scope.row.block ? '启用' : '禁用'}}
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row.id, scope.row.email)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                style="margin: 20px auto 0 auto"
                background
                :hide-on-single-page="true"
                :total="userCount"
                :page-size="pageSize"
                :current-page.sync="page"
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next">
        </el-pagination>
    </el-container>
</template>

<script>
    import AdminService from '../../services/admin.service';
    import Loading from "../../utils/loading";

    export default {
        name: "AdminUser",
        data() {
            return {
                userCount: 0,
                users: [],
                search: '',
                page: 1,
                pageSize: 20,

                roles: [{
                    value: 0,
                    label: '管理员',
                }, {
                    value: 1,
                    label: '普通用户',
                }],
            };
        },
        methods: {

            async handleDelete(uid, email) {
                this.$confirm('永久删除该用户 ' + email + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(async () => {
                    let res = await AdminService.userDel(uid);
                    if (res.code === 1) {
                        for (let index in this.users) {
                            if (this.users[index].id === uid) {
                                this.users.splice(index, 1);
                                break;
                            }
                        }
                        this.userCount = this.userCount - 1;
                        this.$message.success('删除成功！');
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(() => {
                });
            },
            handleCurrentChange(val) {
                this.page = val;
                this.loadUsers();
            },
            async handleUserBlock(uid, row) {
                let res = await AdminService.userBlock(uid);
                if (res.code === 1) {
                    row.block = !row.block;
                    this.$message.success('更新成功！');
                } else {
                    this.$message.error(res.msg);
                }
            },
            async handleUserRoleChange(uid, role) {
                let res = await AdminService.userRole(uid, role);
                if (res.code === 1) {
                    this.$message.success('更新成功！');
                } else {
                    this.$message.error(res.msg);
                }
            },
            async loadUsers() {
                Loading.showLoad('正在加载用户列表...');
                let res = await AdminService.users(this.page, this.pageSize);
                this.users = res.data.rows;
                this.userCount = res.data.count;
                Loading.hideLoad();
            },
        },

        mounted() {
            this.loadUsers();
        },
    };
</script>

<style scoped lang="scss">

</style>
